<template>
  <div class="container">
    <div
        style="
        margin-bottom: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
      "
    >
      <span style="flex: 1">欢迎来到{{ route.query.tag }}</span>
      <bk-input
          left-icon="bk-icon icon-search"
          placeholder="搜索"
          style="flex: 1"
      >
      </bk-input>
    </div>
    <bk-container :col="1" :margin="0">
      <bk-row>
        <bk-col>
          <div v-for="(item, index) in items"
               v-bind="item"
               :key="index">
            <bk-card :showHead="false">
              <div>
                <h4>{{ item.content_title }}</h4>
                <p>点赞{{ item.liked_number }}
                  收藏{{ item.favorite_number }}</p>

              </div>
              <p>作者：{{ item.content_create_people }}<br/>
                时间：{{ dateFormat(item.content_create_time) }}<br/>
                类型：{{ item.content_type }}</p>
              <p>{{ item.content }}</p>
            </bk-card>
          </div>
        </bk-col>

      </bk-row>
    </bk-container>
  </div>
</template>

<script setup>
import {reactive, ref} from "vue";
import {useRoute} from "@/router";
import {onMounted} from "vue"
import {
  bkContainer,
  bkRow,
  bkCol,
  bkInput,
  bkCard,
  bkTab,
  bkTabPanel,
} from "bk-magic-vue";
import axios from "axios";

const route = useRoute();

const active = ref("all");
let items = ref([]);

onMounted(() => {
  let label = route.query.tag
  axios.get('/get_contents_by_label/?label=' + label)
      .then(res => {
        if (res.data.result) {
          items.value = res.data.data
          console.log(items)
        }
      })
})

const dateFormat = (time) => {
  var date = new Date(time);
  var year = date.getFullYear();
  /* 在日期格式中，月份是从0开始的，因此要加0
   * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
   * */
  var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
  var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
  var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
  var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
  var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
  // 拼接
  return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
}
</script>
